<template>
	<view class="body">
		<navBar title="修改个人信息"></navBar>
		<view class="form-box">
			<u--form labelWidth="80" :model="form" :rules="rules" ref="form" :labelStyle="{paddingLeft: '5px'}">
				<!-- 头像 -->
				<u-form-item prop="cover" label="头像" borderBottom required>
					<u-upload border="surround" :maxCount="1" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1">
					</u-upload>
				</u-form-item>
				<!-- 昵称 -->
				<u-form-item prop="name" label="昵称" borderBottom required>
					<u--input placeholder="请输入昵称" border="surround" v-model="form.name"></u--input>
				</u-form-item>
				<!-- 个性签名 -->
				<u-form-item prop="motto" label="个性签名" required>
					<u--textarea confirmType="done" placeholder="请输入个性签名" border="surround" v-model="form.motto">
					</u--textarea>
				</u-form-item>
				<view class="btn">
					<view class="change" @click="upData">
						<u-button type="primary" text="确认"></u-button>
					</view>
					<view class="unChange" @click="jump">
						<u-button type="warning"  text="取消"></u-button>
					</view>
				</view>
			</u--form>
		</view>
	</view>
</template>
<script>
	import {
		message,
		changeMeans,
		upload
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				form: {
					name: "",
					motto: "",
					cover: "",
					classifyArr: null,
					projectId: 170
				},
				rules: {
					name: {
						required: true,
						message: "请输入用户名",
						trigger: ['change', 'blur'],
					},
					motto: {
						required: true,
						message: "请输入个性签名",
						trigger: ['change', 'blur'],
					},
					cover: {
						required: true,
						message: "请上传头像",
						trigger: ['change'],
					}
				},
				fileList1: [],
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 修改用户信息接口
			async upData() {
				console.log(this.form.cover, this.form.name, this.form.motto,this.userInfo.token);
				const userData = await changeMeans(this.form.name,this.form.cover,this.form.motto,this.userInfo.token)
				console.log(userData);
				if(userData.code!==200){
					uni.showToast({
						title: '修改失败',
						duration: 2000
					});
				}
				uni.showToast({
					title: '修改成功',
					duration: 2000
				});
				setTimeout(()=>{
					uni.switchTab({
					url: '/pages/my/my',
					complete:res=>{
						console.log(res);
					}
					
				})
				},800) 
			},
			// 上传用户要修改的头像
			async afterRead(data) {
				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}
				this.fileList1.push(imgStatus)
				console.log(data);
				await uni.uploadFile({
					url: 'https://eggblog.bluej.cn/api/imgUpload',
					filePath: data.file.url,
					name: 'file',
					header: {
						"x-token": this.userInfo.token
					},
					success: res => {
						const fileData = JSON.parse(res.data)

						this.$set(this.fileList1, 0, {
							status: 'success',
							url: fileData.data[0]
						})
						//	将图片上传后的URL保存到表单信息中
						this.form.cover = fileData.data[0]
						console.log(this.form.cover, fileData.data[0]);
						
					}

				})


			},
			jump(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		},
		onLoad() {
			message(this.userInfo.id,this.userInfo.token).then(res=>{
				console.log(res);
				
				this.fileList1.push({
					url: res.data.avatar
				})
				this.form.name = res.data.name
				this.form.motto = res.data.desc
				this.form.cover = res.data.avatar
				console.log(this.userInfo, this.form);
			})
			
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #ececec;
	}

	.form-box {
		margin: 5vh auto;
		border-radius: 5vw;
		width: 85vw;
		padding: 20px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.btn {
		margin-top: 5vh;
		width: 100%;
		display: flex;
		justify-content: space-around;

		>view {
			width: 35%;
		}
	}
</style>
